<template>
  <div class="quality-text">
    <div class="card" v-for="item in cardInfo" :key="item.id">
      <div class="card-picture" v-bind:style="{background: item.color}">
        <img :src="item.imgurl" alt="img">
      </div>
      <div class="title">{{ item.title }}</div>
      <div class="text" v-for="text in item.text" :key="text.id">{{ text }}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: { // 组件传入的内容
    cardInfo: Array // 每个卡片的内容
  }
}
</script>

<style scoped>
    .quality-text{
        margin-top:36px;
        width:915px;
        display:flex;
        justify-content: space-between;
        align-items: center;
    }
    .card-picture{
        width:168px; 
        height:126px;
        border-radius: 5px;
        display:flex;
        justify-content: center;
        align-items: center;
    }
    img{
        width:70px; 
        height:75px;
    }
    .title{
        font-size:20px;
        font-weight: 550;
        margin-top:15px;
        text-align:center;
    }
    .text{
        color:grey;
        text-align:center;
    }
</style>